﻿
@{
    ViewBag.Title = "视频管理";
}
@section Css{
    <style type="text/css">
        #table img {
            width: 100px;
            height: 100px;
        }
    </style>
}
<div class="wrapper wrapper-content animated fadeInUp">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>视频列表</h5>
                    <div class="ibox-tools">
                        <a onclick="add()" class="btn btn-primary btn-xs">新增商品</a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div id="toolbar" class="row m-b-sm m-t-sm">
                        <div class="col-md-7">
                            <button type="button" id="loading-example-btn" class="btn btn-white btn-sm"><i class="fa fa-refresh"></i> 刷新</button>
                            <button id="remove" onclick="deleteAll()" class="btn btn-danger btn-sm" disabled><i class="glyphicon glyphicon-remove"></i> 删除</button>
                        </div>
                        <div class="col-md-5">
                            <div class="input-group">
                                <input type="text" placeholder="请输入商品标题" id="name" class="input-sm form-control"> <span class="input-group-btn">
                                    <button type="button" id="search" class="btn btn-sm btn-primary"> 搜索</button>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="project-list">
                        <table id="table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Js{
    <script type="text/javascript">

        $(function() {
            getTableData();

            $("#loading-example-btn").click(function() {
                $("#name").val('');
                $table.bootstrapTable('refresh', { url: '/Sale/GetVideoList' });
            });
            $("#search").click(function() {
                $table.bootstrapTable('refresh', { url: '/Sale/GetVideoList' });
            });
        });

        function queryParams(params) {
            var param = {
                pageNumber: params.pageNumber,
                pageSize: params.pageSize,
                name: $("#name").val()
            };
            return param;
        }

        var $table = $('#table');

        //初始化表格
        function getTableData() {
            $table.bootstrapTable({
                url: "/Sale/GetVideoList",
                dataType: "json",
                pagination: true, //分页
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 20, 50, 100, 200, 500],
                idField: "videoId", //标识哪个字段为id主键
                singleSelect: false,
                queryParams: queryParams,
                queryParamsType: '',
                clickToSelect: true, //是否启用点击选中行
                sidePagination: "server", //服务端处理分页
                columns: [
                    {
                        title: '序',
                        width: 30,
                        align: 'center',
                        falign: 'center',
                        formatter: function(value, row, index) {
                            return ($table.bootstrapTable("getOptions").pageNumber - 1) * $table.bootstrapTable("getOptions").pageSize + index + 1;
                        }
                    },
                    {
                        field: 'state',
                        checkbox: true,
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '封面图片',
                        field: 'imgPath',
                        align: 'center',
                        valign: 'middle',
                        width: 120,
                        formatter: function(value, row, index) {
                            var img = '<img src="' + value + '" />';
                            return img;
                        }
                    },
                    {
                        title: '视频名称',
                        field: 'videoName',
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '视频地址',
                        field: 'filePath',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        field: 'Id',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var a = '<button type="button" onclick="edit(' + row.videoId + ')" class="btn btn-outline btn-primary btn-xs">编辑</button>';
                            var b = '<button type="button" onclick="del(' + row.videoId + ')" class="btn btn-outline btn-primary btn-xs">删除</button>';
                            return a + b;
                        }
                    }
                ]
            });
        }

//新增
        function add() {

            layer.open({
                type: 2,
                area: ['780px', '450px'],
                title: '视频-新增',
                fixed: false, //不固定
                content: ['/Sale/VideoEdit', 'no']
            });

            //addTab("/Account/SysUserEdit", "管理员-新增");
        }

//编辑
        function edit(id) {
            layer.open({
                type: 2,
                area: ['780px', '450px'],
                title: '视频-编辑',
                fixed: false, //不固定
                content: ['/Sale/VideoEdit?id=' + id, 'no']
            });
        }

//删除
        function del(id) {
            layer.confirm('确认删除当前视频', { icon: 3, title: '提示' }, function (index) {
                $.getJSON("/Sale/VideoDelete?ids=" + id, function (json) {
                    if (json.result == "success") {
                        layer.msg(json.msg, { icon: 1, time: 2000 }, function() {
                            $table.bootstrapTable('refresh', { url: '/Sale/GetVideoList' });
                        });
                    } else {
                        layer.msg(json.msg, { icon: 5, time: 2000 });
                    }
                });
            });

        }

        $table.on('check.bs.table uncheck.bs.table ' +
            'check-all.bs.table uncheck-all.bs.table', function() {
                $("#remove").prop('disabled', !$table.bootstrapTable('getSelections').length);
            });

        //选中行id集合
        function getIdSelections() {
            return $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.videoId;
            });
        }

        function deleteAll() {
            layer.confirm('确认删除选中的视频', { icon: 3, title: '提示' }, function (index) {
                var ids = getIdSelections();
                $.getJSON("/Sale/VideoDelete?ids=" + ids.join(','), function (json) {
                    if (json.result == "success") {
                        layer.msg(json.msg, { icon: 1, time: 2000 }, function () {
                            $table.bootstrapTable('refresh', { url: '/Sale/GetVideoList' });
                        });
                    } else {
                        layer.msg(json.msg, { icon: 5, time: 2000 });
                    }
                });
            });
        }
    </script>
}

